<template>
  <view class="comments">
    <view class="comments-view" @click="goodsComments">
      <view class="left-view">
        <text class="bold-text" v-if="commentsList && commentsList.length">评价</text>
        <text class="bold-text" v-else>暂无评价</text>
      </view>
      <view class="content-view u-margin-left-20"></view>
      <view class="right-view">
        <text class="grade-text">好评率：{{grade}}%</text>
        <u-icon class="collection-icon" name="arrow-right" size="30"></u-icon>
      </view>
    </view>
    <view class="goods-comments" v-if="commentsList && commentsList.length">
      <view class="comments-info u-m-b-20" v-for="(comment, index) in commentsList" :key="index" v-if="index < 2">
        <view class="u-flex">
          <view class="u-m-r-26">
            <u-image width="70" height="70rpx" shape="circle" :src="comment.member_face"></u-image>
          </view>
          <view>
            <view>{{ comment.member_name | filterName }}</view>
            <view>{{ comment.grade | filterGrade }}</view>
            <!-- <u-icon class="u-m-r-4 u-font-10" name="star-fill" color="#f42424" v-for="(star, starIndex) in comment.grade" :key="starIndex"></u-icon> -->
          </view>
        </view>
        <view class="u-m-20">
          <!-- <view class="u-m-b-20 u-line-5">{{ comment.content }}</view> -->
          <view class="u-flex u-flex-wrap" v-if="comment.images">
            <view class="comment-img u-m-r-15 u-m-b-15" v-for="(img, imgIndex) in comment.images" :key="imgIndex">
              <u-image width="200" height="200" :src="img" @click="handlePreviewImage(comment.images, imgIndex)">
              </u-image>
            </view>
          </view>
        </view>
        <view class="reply-info u-m-20" v-if="comment.reply_status === 1 && comment.reply">
          <text>商家回复：</text>
          <view class="u-line-5">{{ comment.reply.content }}</view>
        </view>
        <u-line color="#f3f4f6" />
      </view>
    </view>
    <view class="u-flex u-row-center u-padding-bottom-20" v-if="commentsList && commentsList.length">
      <text class="comment-btn" @click="goodsComments">查看全部评价</text>
    </view>
  </view>
</template>

<script>
  /**
   * 商品详情页评价组件
   *
   * ===== 使用场景 ======
   * 商品详情页。
   *
   * ===== 参数 =====
   * goodsId        商品ID
   * grade          商品好评率
   */
  import * as API_Members from '@/api/members.js'
  export default {
    data() {
      return {
        params: {
          page_no: 1,
          page_size: 10
        },
        commentsList: []
      };
    },
    props: {
      goodsId: {
        type: String,
        default: ''
      },
      grade: {
        type: Number,
        default: 100
      }
    },
    filters: {
      /** 评分 */
      filterGrade(val) {
        switch (val) {
          case 'bad':
            return '差评'
          case 'neutral':
            return '中评'
          default:
            return '好评'
        }
      },
      filterName(str) {
        if (str.length >= 10) {
          let changeStr = '****'
          return str.substr(0, 5) + changeStr + str.substr(5 + changeStr.length)
        } else {
          return str
        }
      }
    },
    mounted() {
      setTimeout(() => {
        this.getGoodsComments()
      }, 1000)
    },
    methods: {
      //评分
      filterGrade(val) {
        switch (val) {
          case 'bad':
            return 1
          case 'neutral':
            return Math.floor(Math.random() * (4 - 2)) + 2
          default:
            return 5
        }
      },
      //图片预览
      handlePreviewImage(index, image) {
        uni.previewImage({
          current: index,
          urls: image
        })
      },
      //商品评价
      goodsComments() {
        uni.navigateTo({
          url: './goods-comments?goods_id=' + this.goodsId
        })
      },
      //商品评价列表
      getGoodsComments() {
        API_Members.getGoodsComments(this.goodsId, this.params).then(response => {
          const {
            data
          } = response
          if (data && data.length) {
            data.forEach(item => {
              item.grade = this.filterGrade(item.grade)
            })
          }
          this.commentsList = this.commentsList.concat(data)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .comments {
    border-radius: 15rpx;
    // margin-top: 23rpx;
    border-top: 1px solid #F7F7F9;
    background-color: #FFFFFF;

    .comment-img {
      border-radius: 10rpx;
      overflow: hidden;
    }

    .comments-view {
      padding: 30rpx;
      display: flex;
      align-items: center;
      padding-bottom: 20rpx;

      .left-view {
        margin-right: 20rpx;
      }

      .right-view {
        .grade-text {
          color: #606266;
          font-size: 24rpx;
        }
      }

      .content-view {
        flex: 1;
      }
    }

    .goods-comments {
      background-color: #FFFFFF;
      padding: 20rpx 30rpx;

      .grade-time-info,
      .reply-info {
        color: #999999;
        font-size: 24rpx;
      }
    }

    //加粗字体
    .bold-text {
      font-weight: bold;
    }
  }
</style>
